<template>
	<div>
		<toubu></toubu>
		<navs></navs>
		<div>
			<div class="inputss">
				<div class="inputss2">
					<input type="text" placeholder="搜索歌曲、歌单、专辑" class="inp" />
					<span class="quan">搜索</span>
					<div class="quxi">取消</div>
					<!---->
				</div>
			</div>
		</div>
		<div class="qipao">
			<h3 class="qipao-h">热门搜索</h3>
			<div class="qipao-d">
				<a href="#" class="qipao-a qipao-b">
					{{list.special_key}}
				</a>
				<div class="dov-lei" v-for="aaa in last">
					<a href="#" class="qipao-a">
						{{aaa.k}}
					</a>
				</div>

			</div>
		</div>
		<div class="liu">
			<ul>
				<li class="li-oli" v-for="li in arr">
					<i class="touxiang"></i>
					<h6 class="lain">{{li.songname}}</h6>
					<p class="lu">{{li.singername}}</p>
				</li>
			</ul>
		</div>
	</div>
</template>

<script>
	import Toubu from './toubu.vue'
	import Navs from './Navs.vue'
	import $ from 'jquery'
	export default {
		data: function() {
			return {
				list: [],
				last: [],
				arr:[]
			}
		},
		components: {
			Toubu,
			Navs
		},
		mounted: function() {
			var url = 'http://localhost:3000/qipao?time=' + new Date().getTime();
			var chat = this;
			$.get(url, function(res) {
				chat.list = res.data
				var att = chat.list.hotkey;
				for(var i = 0; i < att.length; i++) {
					if(att[i].n > 61655) {
						chat.last.push(att[i])
					}

				}
			})

			//焦点事件
			$(".inp").on("focus", function() {
				$(".quxi").css("display", "block");
				$(".qipao").css("display", "none");
				
			})

			$(".quxi").on("click", function() {
				$(".quxi").css("display", "none");
				$(".qipao").css("display", "block")
				$(".liu").css("display", "none");
			})

			//input的回车事件
			var chat = this
			var app
			$(".inp").keydown(function(e) {
				var ev = document.all ? window.event : e;
				if(ev.keyCode == 13) {
					app = $(".inp").val();
					$(".liu").css("display", "block");
						$(".inp").val("")
					var url = 'http://route.showapi.com/213-1';
					$.get(url, {
						showapi_appid: 36577,
						showapi_sign: '67a7fbfa468542a8bab360e64779b37f',
						keyword: app
					}, function(res) {
						chat.arr = res.showapi_res_body.pagebean.contentlist
					}, 'json')
				}
			})

		}
	}
</script>

<style>

</style>